<template>
    <div class="settings-referral-blk table-responsive">

        <AppPageContentTable :cols="[{ label: '学生姓名', prop: 'name' }, { label: '手机号', prop: 'telephone' }]"
            :opApi="studentApi">


        </AppPageContentTable>

    </div>

    <AppDialogForm title="添加学生" ref="refDialog" @save="addStuToClass">
        <form class="search-form">
            <div class="flex items-center">
                <input v-model="student.stuName" type="text" placeholder="请输入学生姓名" class="form-control mr-4"
                    style="width:300px;">
                <button type="button" class="btn-primary" @click="findStudent">搜索</button>
            </div>
        </form>
        <table class="table table-nowrap mb-0">
            <thead>
                <tr>
                    <th>
                        <div class="form-check instruct-check-list">
                            <input class="form-check-input" type="checkbox" name="option1">
                        </div>
                    </th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, idx) in student.list" :key="item.id">
                    <td>
                        <div class="form-check instruct-check-list">
                            <input class="form-check-input" type="checkbox" v-model="student.selected[idx]">
                        </div>
                    </td>
                    <td><a href="view-invoice.html">{{ item.name }}</a></td>
                    <td>男</td>
                    <td>5</td>
                </tr>
            </tbody>
        </table>
    </AppDialogForm>
</template>
<script setup>
import studentApi from '@/api/studentApi'
import bus from '@/utils/bus'
const refDialog = ref(null)
const openDialog = () => {
    refDialog.value.open()
}

// 启用监听
bus.on('open-student', openDialog);

// 在组件卸载之前移除监听
onBeforeUnmount(() => {
    bus.off('open-student', openDialog);
})

const route = useRoute()
const student = reactive({
    stuName: '张',
    curList: [], // 属于本班的学生
    list: [],
    selected: []
})

const addStuToClass = async () => {
    // debugger
    const ids = [];
    student.selected.forEach((item, idx) => {
        if (item) {
            ids.push(student.list[idx].id)
        }
    })
    ids.forEach(async (id) => {
        const data = await studentApi.put(id, { classID: Number(route.query.id) })
    })

    refDialog.value.close()
    search()
}
const findStudent = async () => {
    const data = await studentApi.getList({ keyword: student.stuName })
    student.list = data.list
    student.selected = data.list.map(item => false)
}

const search = async () => {
    const id = route.query.id
    if (!id) {
        alert('参数错误,请选择具体的班级')

        return;
    }
    // 本班的学生
    const res = await studentApi.getList({ classID: id })
    student.curList = res.list
}

onMounted(() => {
    search()
})
</script>